<template>
  <div class="draft-box-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <h2 class="page-title">草稿箱</h2>
      <el-button type="default" @click="handleBack">返回</el-button>
    </div>

    <!-- 搜索区域 -->
    <div class="search-bar">
      <el-input v-model="searchKey" placeholder="请输入关键词搜索" class="search-input" @keyup.enter="handleSearch" />
      <el-button type="primary" @click="handleSearch">
        <el-icon :size="16">
          <Search />
        </el-icon> 搜索
      </el-button>
    </div>

    <!-- 草稿列表表格 - 类型列标题改为下拉选择器 -->
    <el-table :data="filteredDrafts" border stripe style="width: 100%; margin-top: 20px;">
      <el-table-column label="序号" type="index" align="center" width="80" />
      <el-table-column label="时间" prop="time" align="center" />
      <el-table-column label="美容院" prop="shopName" align="center" />
      <el-table-column label="品牌" prop="brand" align="center" />
      <!-- 类型列标题改为下拉选择器 -->
      <el-table-column align="center">
        <template #header>
          <el-select v-model="selectedType" placeholder="类型" size="small" @change="handleTypeFilter"
            class="header-type-select">
            <el-option value="" label="类型" />
            <el-option v-for="type in allTypes" :key="type" :label="type" :value="type" />
          </el-select>
        </template>
        <template #default="scope">
          {{ scope.row.type || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" @click="handleView(scope.row)">查看</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[5, 10, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount" style="margin-top: 20px; text-align: right;" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'

const router = useRouter()

// 所有支持的类型列表
const allTypes = [
  '销售单', '收款单', '采购单', '换货单',
  '退货单', '报损单', '报溢单', '盘点记录'
]

// 模拟草稿数据
const draftList = ref([
  { id: 1, time: '2023-05-23 14:30', shopName: '一平云端', brand: 'GUCCI', type: '销售单' },
  { id: 2, time: '2023-05-23 11:20', shopName: '星辰美业', brand: 'CHANEL', type: '销售单' },
  { id: 3, time: '2023-05-22 09:45', shopName: '瑞丽坊', brand: 'DIOR', type: '采购单' },
  { id: 4, time: '2023-05-22 16:10', shopName: '一平云端', brand: 'GUCCI', type: '收款单' },
  { id: 5, time: '2023-05-21 15:30', shopName: '星辰美业', brand: 'YSL', type: '退货单' },
  { id: 6, time: '2023-05-21 10:05', shopName: '瑞丽坊', brand: 'DIOR', type: '报损单' },
])

// 状态管理
const searchKey = ref('') // 搜索关键词
const selectedType = ref('') // 选中的类型（用于筛选）
const currentPage = ref(1) // 当前页码
const pageSize = ref(10) // 每页条数

// 筛选后的数据
const filteredDrafts = computed(() => {
  let result = [...draftList.value]

  // 类型筛选
  if (selectedType.value) {
    result = result.filter(item => item.type === selectedType.value)
  }

  // 搜索筛选
  if (searchKey.value) {
    const key = searchKey.value.trim().toLowerCase()
    result = result.filter(item =>
      item.shopName.toLowerCase().includes(key) ||
      item.brand.toLowerCase().includes(key) ||
      item.type.toLowerCase().includes(key)
    )
  }

  // 分页处理
  const startIndex = (currentPage.value - 1) * pageSize.value
  return result.slice(startIndex, startIndex + pageSize.value)
})

// 总条数
const totalCount = computed(() => {
  let result = [...draftList.value]
  if (selectedType.value) result = result.filter(item => item.type === selectedType.value)
  if (searchKey.value) {
    const key = searchKey.value.trim().toLowerCase()
    result = result.filter(item =>
      item.shopName.toLowerCase().includes(key) ||
      item.brand.toLowerCase().includes(key) ||
      item.type.toLowerCase().includes(key)
    )
  }
  return result.length
})

// 返回上一页
const handleBack = () => {
  router.back()
}

// 搜索
const handleSearch = () => {
  currentPage.value = 1
}

// 类型筛选
const handleTypeFilter = () => {
  currentPage.value = 1 // 筛选后重置页码
}

// 查看草稿
const handleView = (row: any) => {
  router.push({ path: `/draft/${row.id}`, query: { type: row.type } })
  ElMessage.info(`查看草稿：${row.shopName} - ${row.type}`)
}

// 删除草稿
const handleDelete = async (row: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除【${row.shopName}】的${row.type}草稿吗？`,
      '删除确认',
      {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    draftList.value = draftList.value.filter(item => item.id !== row.id)
    ElMessage.success('草稿已删除')
  } catch (error) {
    // 取消删除
  }
}

// 分页-每页条数变更
const handleSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1
}

// 分页-当前页变更
const handleCurrentChange = (page: number) => {
  currentPage.value = page
}
</script>

<style scoped>
.draft-box-container {
  padding: 24px;
  background-color: #fff;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

/* 搜索区域 */
.search-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.search-input {
  width: 280px;
}

/* 表格头部的类型下拉选择器 */
.header-type-select {
  width: 100px;
  --el-select-input-text-color: #333;
  --el-select-input-placeholder-color: #666;
}

/* 表格样式 */
:deep(.el-table) {
  --el-table-header-bg: #fafafa;
  --el-table-header-text-color: #666;
  --el-table-row-hover-bg-color: #f5f3ff;
}

:deep(.el-table th) {
  font-weight: 500;
}

/* 操作按钮样式 */
:deep(.el-button--small) {
  margin: 0 4px;
}

/* 分页样式 */
:deep(.el-pagination) {
  --el-pagination-item-active-bg-color: #6c63ff;
}
</style>